<template>
  <el-dialog v-model="state.visible" append-to-body title="选择快捷菜单">
    <el-tree
      ref="treeRef"
      :data="state.data"
      :default-checked-keys="state.mKeys"
      highlight-current
      node-key="path"
      :props="state.defaultProps"
      show-checkbox
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取消</el-button>
        <el-button type="primary" @click="toConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
  import { useRoutesStore } from '@/store/modules/routes'
  const routesStore = useRoutesStore()
  const { getRoutes: routes } = storeToRefs(routesStore)
  const treeRef = ref()
  const state = reactive({
    data: routes.value,
    visible: false,
    mKeys: [],
    defaultProps: {
      children: 'children',
      label: 'roleMemo',
    },
  })
  const toConfirm = () => {
    const checkedNodes = treeRef.value.getCheckedNodes(false, false)
    if (checkedNodes) {
      const fastRoutes = checkedNodes.map((item) => {
        return {
          path: item.path,
          title: item.roleMemo,
          icon: item.icon,
        }
      })
      localStorage.setItem('fastRoutes', JSON.stringify(fastRoutes))
    } else {
      localStorage.setItem('fastRoutes', [])
    }
    _emits('saveCallback')
    state.visible = false
  }
  defineExpose({
    openHandle: (data) => {
      state.visible = true
      const mKeys = data.map((item) => {
        return item.path
      })
      state.mKeys = mKeys
    },
  })
  const _emits = defineEmits(['saveCallback'])
</script>
<style lang="scss">
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
